<%@ page language="java" contentType="text/html;charset=utf-8"
	pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"  %>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Design Pattern Config</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<!-- Le styles -->
<link href="<c:url value='/css/bootstrap.min.css'/>" rel="stylesheet">
<link href="<c:url value='/css/bootstrap-responsive.css'/>" rel="stylesheet">

</head>
<body>

	<div class="container">
		<div class="tabbable" style="padding-top: 50px;">
			<div class="tabbable" style="margin-bottom: 18px;">
				<ul class="nav nav-tabs">
					<li class="active"><a href="" data-toggle="tab">信息显示</a></li>
				</ul>
				<div class="tab-content"
					style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
					<div class="tab-pane form-horizontal active" >
							<div class="control-group span9">
								<label class="control-label" for="">设计模式文件名称</label>
								<div class="controls">
									<span class="uneditable-input input-xlarge"><c:out value="${dpiFileName}"></c:out> </span>
								</div>
							</div>
							<div class="control-group span9">
								<label class="control-label" for="">设计模式实例名称</label>
								<div class="controls">
									<span class="uneditable-input input-xlarge"><c:out value="${dpiName}"></c:out></span>
								</div>
							</div>
							<div class="control-group span9">
								<label class="control-label" for="pageList">已有页面</label>
								<div id="pageList" class="controls">
									<div class="btn-group">
										<a class="btn btn-primary" href="#add_page">增加</a>
									</div>
									
										<div class="">
											<p/>
											<table class="table table-bordered table-striped table-hover" >
												<thead>
													<tr>	
														<th>#</th>
														<th>页面名称</th>
														<th>页面类型</th>
														<th>操作</th>
													</tr>
												</thead>
												<tbody>
													<c:forEach items="${exist_pages}" var="instance" varStatus="status">
													<tr>
														<td>${status.count}</td>
														<td>${instance.get("page_name").getValue()}</td>
														<td>${instance.get("page_type").getValue()}</td>
													<td>
														<div class="btn-group">
															<button class="btn btn-info" name="view_page"
																data-target="#page_info_panel" data-toggle="modal">详细</button>
															<button class="btn btn-warning" name="delete_page">删除</button>
															<input type="hidden" name="pageName" value="${instance.get('page_name').getValue()}" />
															<input type="hidden" name="pageType" value="${instance.get('page_type').getValue()}" />
														</div>
													</td>
												</tr>
													</c:forEach>
												</tbody>
											</table>
										</div>
								</div>
							</div>
							<div class="control-group span9" id="add_page">
								<label class="control-label" >添加新页面</label>
								<div class="controls">
									<br /><br />
									<div class="tabbable" style="margin-bottom: 18px;">
									<ul class="nav nav-tabs">
										<li class="active"><a href="#tab1" data-toggle="tab">ARINC 661</a></li>
										<li class=""><a href="#tab2" data-toggle="tab">自定义DF</a></li>
										<li class=""><a href="#tab3" data-toggle="tab">页面数据</a></li>
									</ul>
									<div class="tab-content"
										style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
										<div class="tab-pane active" id="tab1">
											<form class="form-horizontal"
												action="<%=request.getContextPath()%>/displayDesignPattern/arinc661/add"
												method="post" enctype="multipart/form-data">
												<input type="hidden" name="dpiFileName"
													value="${dpiFileName}"></input> <input type="hidden"
													name="dpiName" value="${dpiName}"></input> <input
													type="hidden" name="dpcUri" value="${dpcUri}"></input>
												<input type="hidden" name="pageType" value="arinc661"></input>
												<div class="control-group">
													<label class="control-label" for="pageName">页面名称</label>
													<div class="controls">
														<input type="text" name="pageName" placeholder="页面名称">
													</div>
												</div>
												<div class="control-group">
													<label class="control-label" for="displayFrequency">显示频率</label>
													<div class="controls">
														<input name="displayFrequency" type="text" /> Hz
													</div>
												</div>
												<div class="control-group">
													<label class="control-label" for="viewData">上传文件</label>
													<div id="viewData" class="controls">
														<input type="file" class="file-inputs" title="上传文件"
															name="scadeFile" />
													</div>
												</div>
												<div class="control-group">
													<label class="control-label" for="viewData"></label>
													<div id="viewData" class="controls">
														<img src="<c:url value='/img/temp.png'/>"
															class="img-polaroid" />
													</div>
												</div>
												<div class="control-group">
													<label class="control-label" for="viewData">上传截图</label>
													<div id="viewData" class="controls">
														<input type="file" class="file-inputs" title="上传截图"
															name="imageFile" />
													</div>
												</div>
												<div class="control-group">
													<label class="control-label" for="viewData">连接</label>
													<div id="" class="controls">
														<button class="btn btn-primary"
															data-target="#add_connection_panel" data-toggle="modal">增加</button>
														<p />
														<input type="hidden" name="connections" value="" />
														<table
															class="table table-bordered table-striped table-hover"
															id="connections_table">
															<thead>
																<tr>
																	<th>#</th>
																	<th>SCADE Suite I/O</th>
																	<th>&lt;=&gt;</th>
																	<th>Graphical Panel I/O</th>
																</tr>
															</thead>
															<tbody>
															</tbody>
														</table>
													</div>
												</div>
												<div class="control-group">
													<div class="controls">
														<button type="submit" class="btn btn-primary">确认</button>
														<button type="reset" class="btn">取消</button>
													</div>
												</div>
											</form>
										</div>
										<div class="tab-pane" id="tab2">
											<form class="form-horizontal"
												action="<%=request.getContextPath()%>/displayDesignPattern/userDefineDF/add"
												method="post">
												<input type="hidden" name="dpiFileName" value="${dpiFileName}"></input>
												<input type="hidden" name="dpiName" value="${dpiName}"></input>
												<input type="hidden" name="dpcUri" value="${dpcUri}"></input>
												<input type="hidden" name="pageType" value="userDefineDF"></input>
												<div class="control-group">
													<label class="control-label" for="pageName">页面名称</label>
													<div class="controls">
														<input type="text" name="pageName" placeholder="页面名称">
													</div>
												</div>
												<div class="control-group">
													<label class="control-label" for="displayFrequency">显示频率</label>
													<div class="controls">
														<input name="displayFrequency" type="text" /> Hz
													</div>
												</div>
												<div class="control-group">
													<label class="control-label" for="viewData">已有页面元素</label>
													<div id="" class="controls">
														<button class="btn btn-primary"
															data-target="#add_element_panel" data-toggle="modal">增加</button>
														<p />
														<input type="hidden" name="elements" value="" />
														<table
															class="table table-bordered table-striped table-hover"
															id="elements_table">
															<thead>
																<tr>
																	<th>#</th>
																	<th>名称</th>
																	<th>类型</th>
																</tr>
															</thead>
															<tbody>
															</tbody>
														</table>
													</div>
												</div>
												
												<div class="control-group">
													<div class="controls">
														<button type="submit" class="btn btn-primary">确认</button>
														<button type="reset" class="btn">取消</button>
													</div>
												</div>
											</form>
										</div>
										<div class="tab-pane" id="tab3">
											<form class="form-horizontal"
												action="<%=request.getContextPath()%>/displayDesignPattern/pageData/add"
												method="post" enctype="multipart/form-data">
												<input type="hidden" name="dpiFileName"
													value="${dpiFileName}"></input> <input type="hidden"
													name="dpiName" value="${dpiName}"></input> <input
													type="hidden" name="dpcUri" value="${dpcUri}"></input>
												<input type="hidden" name="pageType" value="pageData"></input>
												<div class="control-group">
													<label class="control-label" for="pageName">页面名称</label>
													<div class="controls">
														<input type="text" name="pageName" placeholder="页面名称">
													</div>
												</div>
												<div class="control-group ">
													<label class="control-label" for="displayFrequency">显示频率</label>
													<div class="controls">
														<input name="displayFrequency" type="text" /> Hz
													</div>
												</div>
												<div class="control-group">
													<label class="control-label" for="pageFile">上传文件</label>
													<div class="controls">
														<input type="file" class="file-inputs" title="上传文件"
															name="pageFile" />
													</div>
												</div>
												<div class="control-group">
													<label class="control-label" for=""></label>
													<div id="" class="controls">
														<img src="<c:url value='/img/temp.png'/>"
															class="img-polaroid" />
													</div>
												</div>
												<div class="control-group">
													<label class="control-label" for="viewData">上传截图</label>
													<div id="viewData" class="controls">
														<input type="file" class="file-inputs" title="上传截图"
															name="imageFile" />
													</div>
												</div>
												<div class="control-group">
													<label class="control-label" for="viewData">页面动态变量</label>
													<div id="" class="controls">
														<button class="btn btn-primary"
															data-target="#add_variable_panel" data-toggle="modal">增加</button>
														<p />
														<input type="hidden" name="variables" value="" />
														<table
															class="table table-bordered table-striped table-hover"
															id="variables_table">
															<thead>
																<tr>
																	<th>#</th>
																	<th>名称</th>
																	<th>类型</th>
																</tr>
															</thead>
															<tbody>
															</tbody>
														</table>
													</div>
												</div>

												<div class="control-group">
													<div class="controls">
														<button type="submit" class="btn btn-primary">确认</button>
														<button type="reset" class="btn">取消</button>
													</div>
												</div>
											</form>
										</div>
									</div>
									</div>
								</div>
							</div>
					</div>
				</div>
			</div>
			<!-- /tabbable -->
		</div>
	</div>
	
	<div class="modal hide fade" id="add_element_panel">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			<h3>添加页面元素</h3>
		</div>
		<div class="modal-body form-horizontal">
			<div class="control-group">
				<label class="control-label" for="element_name">页面元素名称</label>
				<div class="controls">
					<input id="element_name" type="text" />
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="io">页面元素类型</label>
				<div class="controls" id="element_radio_group">
					<label class="radio">
						<input type="radio" name="psRadio"id="static_string_element_radio" value="static_string">静态字符
					</label> 
					<label class="radio"> 
						<input type="radio" name="psRadio" id="dynamic_string_element_radio" value="dynamic_string">动态字符
					</label> 
					<label class="radio">
						<input type="radio" name="psRadio" id="point_element_radio" value="point">点
					</label> 
					<label class="radio"> 
						<input type="radio" name="psRadio" id="line_element_radio" value="line">直线
					</label> 
					<label class="radio"> 
						<input type="radio" name="psRadio"id="circle_element_radio" value="circle">圆
					</label>
				</div>
			</div>
			<div id="elements_div">
				<div id="static_string_element">
					<div class="control-group ">
						<label class="control-label" for="x_coordinate">横坐标</label>
						<div class="controls">
							<input name="x_coordinate" type="text" />
						</div>
					</div>
					<div class="control-group ">
						<label class="control-label" for="y_coordinate">纵坐标</label>
						<div class="controls">
							<input name="y_coordinate" type="text" />
						</div>
					</div>
					<div class="control-group ">
						<label class="control-label" for="string_content">字符内容</label>
						<div class="controls">
							<input name="string_content" type="text" />
						</div>
					</div>
				</div>
				<div id="dynamic_string_element">
					<div class="control-group ">
						<label class="control-label" for="x_coordinate">横坐标</label>
						<div class="controls">
							<input name="x_coordinate" type="text" />
						</div>
					</div>
					<div class="control-group ">
						<label class="control-label" for="y_coordinate">纵坐标</label>
						<div class="controls">
							<input name="y_coordinate" type="text" />
						</div>
					</div>
					<div class="control-group ">
						<label class="control-label" for="string_binding">字符绑定</label>
						<div class="controls">
							<select id="string_binding">
								<option>航路点</option>
								<option>经度</option>
								<option>纬度</option>
							</select>
						</div>
					</div>
				</div>
				<div id="point_element">
					<div class="control-group ">
						<label class="control-label" for="x_coordinate">横坐标</label>
						<div class="controls">
							<input name="x_coordinate" type="text" />
						</div>
					</div>
					<div class="control-group ">
						<label class="control-label" for="y_coordinate">纵坐标</label>
						<div class="controls">
							<input name="y_coordinate" type="text" />
						</div>
					</div>
				</div>
				<div id="line_element">
					<div class="control-group ">
						<label class="control-label" for="start_x_coordinate">起点横坐标</label>
						<div class="controls">
							<input name="start_x_coordinate" type="text" />
						</div>
					</div>
					<div class="control-group ">
						<label class="control-label" for="start_y_coordinate">起点纵坐标</label>
						<div class="controls">
							<input name="start_y_coordinate" type="text" />
						</div>
					</div>
					<div class="control-group ">
						<label class="control-label" for="end_x_coordinate">终点横坐标</label>
						<div class="controls">
							<input name="end_x_coordinate" type="text" />
						</div>
					</div>
					<div class="control-group ">
						<label class="control-label" for="end_y_coordinate">终点纵坐标</label>
						<div class="controls">
							<input name="end_y_coordinate" type="text" />
						</div>
					</div>
				</div>
				<div id="circle_element">
					<div class="control-group ">
						<label class="control-label" for="center_x_coordinate">圆心横坐标</label>
						<div class="controls">
							<input name="center_x_coordinate" type="text" />
						</div>
					</div>
					<div class="control-group ">
						<label class="control-label" for="center_y_coordinate">圆心纵坐标</label>
						<div class="controls">
							<input name="center_y_coordinate" type="text" />
						</div>
					</div>
					<div class="control-group ">
						<label class="control-label" for="radius">半径</label>
						<div class="controls">
							<input name="radius" type="text" />
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="modal-footer">
				<button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
				<button class="btn btn-primary" id="add_element_btn">保存</button>
		</div>
	</div>

	<div class="modal hide fade" id="page_info_panel">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			<h3>页面详情</h3>
		</div>
		<div class="modal-body form-horizontal" >
			<div class="control-group" >
    			<label class="control-label" for="page_name_info">页面名称</label>
    			<div class="controls">
      				<span class="uneditable-input input-xlarge" id="page_name_info"></span>
    			</div>
 			</div>
 			<div class="control-group" >
    			<label class="control-label" for="page_name_info">页面类型</label>
    			<div class="controls">
      				<span class="uneditable-input input-xlarge" id="page_type_info"></span>
    			</div>
 			</div>
 			<div class="control-group" >
    			<label class="control-label" for="page_name_info">显示频率</label>
    			<div class="controls">
      				<span class="uneditable-input input-xlarge" id="display_frequency_info"></span>
    			</div>
 			</div>
 			<div id="arinc661_page_info" >
 			<div class="control-group">
    			<label class="control-label" for="scade_file_info">SCADE Sutie File</label>
    			<div class="controls">
      				<span class="uneditable-input input-xlarge" id="scade_file_info"></span>
    			</div>
 			</div>
 			<div class="control-group">
    			<label class="control-label" for="scade_image">页面截图</label>
    			<div class="controls">
	      			<img id="" src="<c:url value='/img/temp.png'/>" class="img-polaroid" />
    			</div>
 			</div>
 			<div class="control-group">
    			<label class="control-label" for="image_file">Image File</label>
    			<div class="controls">
      				<span class="uneditable-input input-xlarge" id="scade_image_info"></span>
    			</div>
 			</div>
			<div class="control-group">
    			<label class="control-label" for="connections">连接</label>
    			<div class="controls">
					<table class="table table-bordered table-striped table-hover" >
						<tbody id="connections_info"></tbody>
					</table>
				</div>
 			</div>
			</div>  <!--end of arinc661 page info-->
 			<div id="userDefineDF_page_info" >
 			<div class="control-group">
    			<label class="control-label" for="elements_info">页面元素</label>
    			<div class="controls">
					<table class="table table-bordered table-striped table-hover" >
						<thead>
							<tr>
								<th>名字</th>
								<th>类型</th>
								<th>值</th>
							</tr>
						</thead>
						<tbody id="elements_info"></tbody>
					</table>
				</div>
 			</div>
 			</div> <!-- end of userDefineDF page info -->
 			<div id="pageData_page_info">
 			<div class="control-group">
    			<label class="control-label" for="scade_file_info">页面文件</label>
    			<div class="controls">
      				<span class="uneditable-input input-xlarge" id="page_file_info"></span>
    			</div>
 			</div>
 			<div class="control-group">
    			<label class="control-label" for="scade_image">页面</label>
    			<div class="controls">
	      			<img id="" src="<c:url value='/img/temp.png'/>" class="img-polaroid" />
    			</div>
 			</div>
 			<div class="control-group">
    			<label class="control-label" for="image_file">页面截图</label>
    			<div class="controls">
      				<span class="uneditable-input input-xlarge" id="page_image_info"></span>
    			</div>
 			</div>
			<div class="control-group">
    			<label class="control-label" for="variables_info">动态变量</label>
    			<div class="controls">
					<table class="table table-bordered table-striped table-hover" >
						<thead>
							<tr>
								<th>名字</th>
								<th>类型</th>
								<th>绑定</th>
							</tr>
						</thead>
						<tbody id="variables_info"></tbody>
					</table>
				</div>
 			</div>
 			</div><!-- end of pageData page info -->
		</div>
		<div class="modal-footer">
			<button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
			<button class="btn btn-primary" id="view_page_info">确定</button>	
		</div>
	</div>
	
	<div class="modal hide fade" id="add_connection_panel">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			<h3>添加连接</h3>
		</div>
		<div class="modal-body form-horizontal">
			<div class="control-group">
    			<label class="control-label" for="suite_variable">SCADE Suite I/O</label>
    			<div class="controls">
      				<input type="text" id="suite_variable" placeholder="">
    			</div>
 			</div>
 			<div class="control-group">
    			<label class="control-label" for="io">输入输出</label>
    			<div class="controls" id="ps_radio_group">
      				<label class="radio">
  						<input type="radio" name="psRadio" id="optionsRadios1" value="panel_to_suite" checked>
  							Suite &lt;= Panel
  					</label>
					<label class="radio">
 						 <input type="radio" name="psRadio" id="optionsRadios2" value="suite_to_panel" >
							Suite =&gt; Panel
					</label>
    			</div>
 			</div>
 			<div class="control-group">
    			<label class="control-label" for="panel_variable">Graphical Panel I/O</label>
    			<div class="controls">
      				<input type="text" id="panel_variable" placeholder="">
    			</div>
 			</div>
		</div>
		<div class="modal-footer">
			<button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
			<button class="btn btn-primary" id="add_connection">保存</button>
		</div>
	</div>
	
	<div class="modal hide fade" id="add_variable_panel">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			<h3>添加页面变量</h3>
		</div>
		<div class="modal-body form-horizontal">
			<div class="control-group">
    			<label class="control-label" for="variable_name">变量名称</label>
    			<div class="controls">
      				<input type="text" id="variable_name" placeholder="变量名称">
    			</div>
 			</div>
 			<div class="control-group">
    			<label class="control-label" for="io">绑定</label>
    			<div class="controls" id="variable_radio_group">
      				<label class="radio">
  						<input type="radio" name="variableRadio" id="display_data_variable_radio" value="display_data">
  							显示数据区
  					</label>
					<label class="radio">
 						 <input type="radio" name="variableRadio" id="data_entity_variable_radio" value="data_entity">
							数据实体区
					</label>
    			</div>
 			</div>
 			<div id="variables_div">
 				<div class="control-group " id="display_data_variable">
					<label class="control-label" for="display_data">绑定</label>
					<div class="controls">
						<select id="display_data_area">
							<option value="光标">光标</option>
							<option value="页面号">页面号</option>
							<option value="相对距离">相对距离</option>
						</select>
					</div>
				</div>
				<div class="control-group " id="data_entity_variable">
					<label class="control-label" for="data_entity">绑定</label>
					<div class="controls">
						<select id="data_entity_area">
							<c:forEach items="${data_components}" var="dcom">
								<option value="${dcom.uri}">
									<c:out value="${dcom.name}"></c:out>
								</option>
							</c:forEach>
						</select>
					</div>
				</div>
 			</div>
		</div>
		<div class="modal-footer">
			<button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
			<button class="btn btn-primary" id="add_variable_btn">保存</button>
		</div>
	</div>
		
		<!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="<c:url value='/js/jquery.min.js'/>"></script>
    <script src="<c:url value='/js/bootstrap.min.js'/>"></script>
	<script src="<c:url value='/js/display_dp_component.js'/>"></script>
	<script src="<c:url value='/js/bootstrap.file-input.js'/>"></script>
		
</body>
</html>